<template>
    <div class="pay-box">
        <h1 class="mod-title">
            <span class="ico_log" :class="pay.type == 'zfb' ? 'ico-4' : 'ico-3'"></span>
        </h1>

        <div class="mod-ct">
            <div class="order">
            </div>

            <div style="margin-top: 10px;">
                <span style="color: red;">提示：付款金额要与显示的金额一致，否则后果自负</span>
            </div>

            <div class="amount" id="money">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" class="amount2">{{ pay.price }}</span>元
                <span @click="copy(pay.price)"
                    style="font-size: 10px;color: darkcyan;cursor: pointer;">&nbsp;&nbsp;复制金额</span>
            </div>

            <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
                <div data-role="qrPayImg" class="qrcode-img-area">
                    <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;"></div>
                    <div style="position: relative;display: inline-block;">

                        <img id="imgCode" :src="pay.wxcode" style="width: 220px;" v-if="pay.type == 'wx'" />

                        <img id="imgCode" :src="pay.zfbcode" style="width: 220px;" v-else />

                    </div>
                </div>
            </div>

            <div class="time-item" style="padding-top: 10px">
                <div class="time-item" id="msg">
                    <h1 class="overtime">订单名称：<span>{{ pay.name }}</span></h1>
                </div>

                <div class="time-item">
                    <h1>订单号:<span data-payid={{pay.id}}>{{ pay.code }}</span></h1>

                    <input type="hidden" value={{pay.id}} id="payid">
                </div>

                <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
                <strong id="minute_show">{{ minutes }}分</strong>
                <strong id="second_show">{{ seconds }}秒</strong>
                <div class="time-item"></div>
            </div>

            <div class="tip">
                <div class="ico-scan"></div>
                <div class="tip-text">
                    <p id="showtext" v-if="pay.type == 'wx'">打开微信[扫一扫]</p>
                    <p id="showtext" v-else>打开支付宝[扫一扫]</p>
                </div>
            </div>

            <!--[if IE 8]>
                <div class="tip-text" style="color:#ff0000">您的浏览器版本较低，请升级后再试！</div>
            <![endif]-->
        </div>
    </div>
</template>

<script setup>
const pay = ref([])
const { proxy } = getCurrentInstance();
const business = ref(proxy.$business.value)
const busid = business.value.id
const id = ref(proxy.$route.query.id) //地址栏的vip的id
// 挂载前获取订单信息
onMounted(() => {
    getpay();
})

onUnmounted(() => {
    clearInterval(timers.value); // 清除倒计时定时器
    clearInterval(interval.value); // 清除轮询状态定时器
})

// 获取订单信息函数
const getpay = async () => {
    const params = {
        busid: busid,
        vipid: id.value
    }
    const res = await proxy.$http.post({
        url: '/vip/buyvip',// 接口地址
        params
    })

    if (res.code === 1) {
        pay.value = res.data;
        maxtime = pay.value.createtime + 90 - Math.floor(Date.now() / 1000);

    } else {
        proxy.$fail(res.msg);
        setTimeout(() => {
            proxy.$back();
        }, 1000);
    }
}

// 订单超时时间
var maxtime = 0;
const minutes = ref()//分
const seconds = ref()//秒

// 计时函数
function CountDown() {
    if (maxtime >= 0) {
        minutes.value = Math.floor(maxtime / 60);
        seconds.value = Math.floor(maxtime % 60);
        --maxtime;
    } else {
        pay.value.wxcode = '/assets/pay/images/qrcode_timeout.png';
        pay.value.zfbcode = '/assets/pay/images/qrcode_timeout.png';
        clearInterval(timers);
        clearInterval(interval.value);
        // state = false;

        const payid = pay.value.id;
        FixStatus(payid);
    }
}

function GetPayId() {
    const payid = pay.value.id;

    if (payid != "" && payid != "undefined") {
        GetStatus(payid);
    }
}

async function GetStatus(payid) {
    const res = await proxy.$http.post({

        url: '/vip/status',
        params: {
            payid: payid
        }
    })

    if (res.code === 1) {
        proxy.$success('支付成功');
        clearInterval(timers);
        setTimeout(() => {
            proxy.$router.push({
                path: '/',
            })
        }, 1000);
    } else if (res.msg === '支付订单不存在') {
        proxy.$fail(res.msg);
        clearInterval(timers);
        setTimeout(() => {
            proxy.$router.push({
                path: '/vi',
            })
        }, 1000);
    } else if (res.data.status === '2') {
        proxy.$fail('订单已关闭,请重新下单');
        clearInterval(timers);
        setTimeout(() => {
            proxy.$router.push({
                path: '/vip',

            })
        }, 1000);
    }

}

// 复制金额
function copy(price) {
    navigator.clipboard.writeText(price)
        .then(() => {
            alert('金额已复制到剪贴板');
        })
        .catch(err => {
            console.error('无法复制文本: ', err);
            alert('复制失败，请手动复制');
        });
}

// 更改订单状态
async function FixStatus(payid) {
    const res = await proxy.$http.post({
        url: '/vip/fixstatus',
        params: {
            payid: payid
        }
    })
    if (res.code === 1) {
        proxy.$fail('订单已过期，请重新下单')
        setTimeout(() => {
            proxy.$router.push({
                path: '/vip',
            })
        }, 2000);
    } else {
        proxy.$fail(res.msg);
        setTimeout(() => {
            proxy.$router.push({
                path: '/vip',
            })
        }, 2000);
    }
}

// const timers = ref(null);
const interval = ref(null);

const timers = setInterval(CountDown, 1000);
interval.value = setInterval(GetPayId, 3000);

</script>

<style scoped>
.pay-box {
    width: 100%;
    height: 100vh;
    background-color: white;
}

body {
    background: #f7f7f7;
    height: 100%;
    max-width: 640px;
    min-width: 300px;
    min-height: 100%;
    margin: 0 auto;
}

.mod-title {
    text-align: center;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

h1 {
    font-family: "微软雅黑";
    font-size: 12px;
    margin: 5px 0;
    padding-bottom: 2px;
}

.ico_log {
    display: inline-block;
    width: 130px;
    height: 38px;
    vertical-align: middle;
    margin-right: 7px;
}

.ico-1 {
    background: url("/assets/pay/images/logo_alipay.jpg") no-repeat;
    background-size: cover;
}

.ico-2 {
    background: url("/assets/pay/images/logo_weixin.jpg") no-repeat;
}

.ico-3 {
    background: url("/assets/pay/images/logo_weixin.jpg") no-repeat;
    background-size: cover;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ico-4 {
    background: url("/assets/pay/images/logo_alipay.jpg") no-repeat;
    background-size: cover;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ico-7 {
    background: url("../images/udst.jpg") no-repeat;
    background-size: cover;
    margin-top: 5px;
    margin-bottom: 5px;
}

.mod-title .text {
    font-size: 20px;
    color: #333;
    font-weight: bold;
    vertical-align: middle
}

.mod-ct {
    min-width: 300px;
    max-width: 640px;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    background: #fff url("/assets/pay/images/wave.png") top center repeat-x;
    text-align: center;
    color: #333;
    border: 1px solid #e5e5e5;
    border-top: none
}

.mod-ct .order {
    font-size: 20px;
    padding-top: 10px
}

.mod-ct .amount {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.mod-ct .amount2 {
    font-size: 25px;
}

.moneySize {
    font-size: 20px;
    color: #f00;
}

.mod-ct .qr-image {
    margin-top: 30px
}

.mod-ct .qr-image img {
    width: 230px;
    height: 230px
}

.mod-ct .detail {
    margin-top: 10px;
    padding-top: 0px;
    padding-bottom: 10px;

}

.mod-ct .detail .arrow .ico-arrow {
    display: inline-block;
    width: 20px;
    height: 11px;
    background: url("../images/wechat-pay.png") -25px -100px no-repeat
}

.mod-ct .detail .detail-ct {
    display: none;
    font-size: 12px;
    text-align: right;
    line-height: 28px
}

.mod-ct .detail .detail-ct dt {
    float: left
}

.mod-ct .detail-open {
    border-top: 1px solid #e5e5e5
}

.mod-ct .detail .arrow {
    padding: 6px 34px;
    border: 1px solid #e5e5e5
}

.mod-ct .detail .arrow .ico-arrow {
    display: inline-block;
    width: 20px;
    height: 11px;
    background: url("../images/wechat-pay.png") -25px -100px no-repeat
}

.mod-ct .detail-open .arrow .ico-arrow {
    display: inline-block;
    width: 20px;
    height: 11px;
    background: url("../images/wechat-pay.png") 0 -100px no-repeat
}

.mod-ct .detail-open .detail-ct {
    display: block
}

.mod-ct .tip {
    margin-top: 20px;
    border-top: 1px dashed #e5e5e5;
    padding: 10px 0;
    position: relative
}

.mod-ct .tip .ico-scan {
    display: inline-block;
    width: 56px;
    height: 55px;
    background: url("/assets/pay/images/wechat-pay.png") 0 0 no-repeat;
    vertical-align: middle;
}

.mod-ct .tip .tip-text {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    margin-left: 23px;
    font-size: 16px;
    line-height: 28px;
}

.mod-ct .tip .dec {
    display: inline-block;
    width: 22px;
    height: 45px;
    background: url("../images/wechat-pay.png") 0 -55px no-repeat;
    position: absolute;
    top: -23px
}

.mod-ct .tip .dec-left {
    background-position: 0 -55px;
    left: -136px
}

.mod-ct .tip .dec-right {
    background-position: -25px -55px;
    right: -136px
}

.foot {
    text-align: center;
    margin: 30px auto;
    color: #888888;
    font-size: 12px;
    line-height: 20px;
    font-family: "simsun"
}

.copyRight {
    text-align: center;
    color: #888888;
    margin-bottom: 1px;
}

.copyRight a {
    color: #888888;
}

h1 {
    font-family: "微软雅黑";
    font-size: 12px;
    margin: 5px 0;
    padding-bottom: 2px;
}

.time-item strong {
    background: #3ec742;
    color: #fff;
    line-height: 25px;
    font-size: 15px;
    font-family: Arial;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.item-title {
    background: none;
    line-height: 25px;
    font-size: 24px;
    padding: 0 10px;
    float: left;
}

.paybtn {
    display: inline-block;
    width: 100%;
    height: 80px;
    vertical-align: middle;
    padding-top: 10%;
    margin-right: 7px
}


.submit_alipay {
    font-size: 16px;
    font-family: Arial;
    font-weight: normal;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #84bbf3;
    padding: 9px 76px;
    text-decoration: none;
    background: -moz-linear-gradient(center top, #79bbff 105%, #378de5 0%);
    background: -ms-linear-gradient(top, #79bbff 105%, #378de5 0%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background: -webkit-gradient(linear, left top, left bottom, color-stop(105%, #79bbff), color-stop(0%, #378de5));
    background-color: #79bbff;
    color: #ffffff;
    display: inline-block;
    text-shadow: 1px 1px 0px #528ecc;
    -webkit-box-shadow: 0px 0px 0px 0px #bbdaf7;
    -moz-box-shadow: 0px 0px 0px 0px #bbdaf7;
    box-shadow: 0px 0px 0px 0px #bbdaf7;
}

.submit_alipay:active {
    position: relative;
    top: 1px;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    width: 80%;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn:hover,
.btn:focus {
    color: #333;
    text-decoration: none;
}

.btn:active,
.btn.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.btn-primary {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #3071a9;
    border-color: #285e8e;
}

.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary .badge {
    color: #428bca;
    background-color: #fff;
}

.f-bold {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

/* This css button was generated by css-button-generator.com */
@media screen and (max-width: 768px) {
    /*body,.body {*/
    /*max-width: 100%;*/
    /*min-width: 100%;*/
    /*min-height: 100%;*/
    /*width: 100%;*/
    /*}*/
    /*.mod-title {*/
    /*height: 18rem;*/
    /*line-height: 18rem;*/
    /*}*/
    /*.ico_log {*/
    /*width: 40%;*/
    /*height: 12rem;*/
    /*margin-top: 3rem;*/
    /*}*/
}
</style>
